import React, { useState } from "react"
import logoPng from "@/assets/imgs/logo.png"
import { class_esy, Collapse, Dialog, Img, Input, RightOutlined, MenuOutlined } from "esy-ui"
import { useLocation, useNavigate } from "react-router-dom"
import { useTranslation } from "react-i18next"
import { OptionItem, options, options2, options3 } from "./const"
import MenuContent from "./MenuContent"

const Title = (props: { active?: boolean; text: string }) => {
    return (
        <>
            <div className={class_esy([props.active ? "text-primary" : ""])}>{props.text}</div>
            <RightOutlined className={class_esy(["transition-transform duration-150", props.active ? "rotate-90 text-primary" : ""])} />
        </>
    )
}

function Header() {
    const navigate = useNavigate()
    const { t } = useTranslation()
    const { pathname } = useLocation()
    const [open, setOpen] = useState(false)

    const goHome = () => {
        navigate("/")
    }
    const goPath = (e) => {
        const dataPath = e.target.getAttribute("data-path")
        if (dataPath) {
            navigate(dataPath)
        }
    }

    const onClose = () => {
        setOpen(false)
    }

    return (
        <header className="flex items-center justify-between h-40px bg-white rounded-b-xl shadow-card text-sm text-text-1 px-2 md:px-8 sticky top-0 z-10">
            <div className="flex items-center cursor-pointer whitespace-nowrap mr-2 md:mr-0" onClick={goHome}>
                <Img className="w-24px h-24px" src={logoPng} />
                <div className="font-bold hidden ml-2 sm:flex">esy-ui</div>
            </div>
            <div className="flex items-center whitespace-nowrap">
                {options.map((it) => (
                    <div className={class_esy(["mx-4 cursor-pointer hidden md:flex hover:text-primary", it.path === pathname ? "text-primary font-bold" : ""])} key={it.tKey} data-path={it.path} onClick={goPath}>
                        {t(it.tKey)}
                    </div>
                ))}
                <Input placeholder="Search" size="mini" />
            </div>
            <div className="items-center whitespace-nowrap hidden md:flex">
                {options2.map((it) => (
                    <div className={class_esy(["px-3", !it.type ? "cursor-pointer hover:bg-btn-hover-1" : ""])} key={it.tKey} data-path={it.path} onClick={goPath}>
                        {t(it.tKey)}
                    </div>
                ))}
            </div>
            <div
                onClick={() => {
                    setOpen(true)
                }}
                className="flex mx-2 cursor-pointer w-24px h-24px justify-center items-center hover:text-primary md:hidden"
            >
                <MenuOutlined />
            </div>
            <Dialog open={open} direction="right" onClose={onClose}>
                <div className="px-2.5 text-text-1 overflow-y-scroll h-full py-1 select-none">
                    {options3.map((it, i) => {
                        if (!it.tKey) {
                            return (
                                <Collapse key={it.tKey || i}>
                                    {it.children?.map((its, idx) => (
                                        <Collapse.Item key={its.tKey} title={<Title text={t(its.tKey)} />} panelKey={its.tKey}>
                                            <MenuContent list={its.children as OptionItem[]} idx={idx} />
                                        </Collapse.Item>
                                    ))}
                                </Collapse>
                            )
                        }
                        return (
                            <div
                                className={class_esy(["rounded-sm text-sm py-1.5 px-2 transition-colors duration-300", i === 0 ? "text-right font-bold" : "my-1.5 hover:bg-btn-hover-1 cursor-pointer", [1, 2].includes(i) && it.path === pathname ? "text-primary bg-hover hover:bg-hover" : ""])}
                                key={it.tKey}
                                data-path={it.path}
                                onClick={goPath}
                            >
                                {t(it.tKey)}
                            </div>
                        )
                    })}
                </div>
            </Dialog>
        </header>
    )
}

export default Header
